<template>
  <div class="add-given-wrap">
    <el-form
      :inline="true"
      :model="ruleform"
      ref="from"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="盒子" prop="ydtBox">
        <el-input
          v-model="ruleform.ydtBox"
          message
          placeholder
          style="width:300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="网关" prop="gateway">
        <el-input
          v-model="ruleform.gateway"
          message
          placeholder
          style="width:300px"
        ></el-input>
      </el-form-item>
      <el-form-item label="核心组件" prop="coreComs">
        <el-input
          v-model="ruleform.coreComs"
          message
          placeholder
          style="width:300px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('from')"
          >保存</el-button
        >
        <el-button type="warning" plain @click="onReset('from')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import { resetForm } from "@/utils/Tool";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ruleform: {
        ydtBox: "",
        gateway: "",
        coreComs: "",
      },
      rules: {
        ydtBox: [{ required: true, message: "请输入盒子ID", trigger: "blur" }],
        gateway: [{ required: true, message: "请输入网关ID", trigger: "blur" }],
        coreComs: [
          { required: true, message: "请输入核心组件应用ID", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getInit();
  },
  methods: {
    //1、获取展示
    getInit() {
      postData("/adminweb/dev/app/client/get", {
        clients: ["ydt-box", "ydt-gw", "ydts-kernel"],
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            let apps = res.datas.apps;
            console.log(apps);
            for (var i = 0; i < apps.length; i++) {
              this.ruleform.ydtBox = apps[0].app_id;
              this.ruleform.gateway = apps[1].app_id;
              this.ruleform.coreComs = apps[2].app_id;
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
    //添加 提交
    onSubmit(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/dev/app/client/set", {
            apps: [
              {
                app_id: this.ruleform.ydtBox,
                client_id: "ydt-box",
              },
              {
                app_id: this.ruleform.gateway,
                client_id: "ydt-gw",
              },
              {
                app_id: this.ruleform.coreComs,
                client_id: "ydts-kernel",
              },
            ],
          })
            .then((res) => {
              if (res.code == 0) {
                console.log(res);
                that.$message.success("添加成功！");
                that.getInit();
              } else if (res.code == -56055) {
                return;
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((err) => {
              that.$message.error("添加失败");
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    //重置
    onReset(val) {
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
.add-given-wrap {
  padding: 15px;
}
</style>
